<template>
    <el-dialog :visible.sync="dialogVisible"
       :before-close="handleClose" class="unpassItem-pop">
        <div class="layoutBox">
            <div class="dialogHeader">
                <div class="titleCan">
                    <p class="columnBar"></p><p class="dialogTitle">不良原因</p>
                </div>
            </div>
            <div class="dialogBody">
                <!-- <div class="leftPart">
                    <div v-for="(ele, key, ind) in unpassReason" :key="ind" class="unpassReason">
                        <div class="reasonItems" @click.prevent="changeCurrentClass(key)">
                            <img src="@/assets/img/form_checkboxes_checked.png" v-if="Boolean(choosedClassObj[key])">
                            <img src="@/assets/img/form_checkboxes_unchecked.png" v-else>
                            <P style="margin-left: 10px;color: #222222">{{key}}</P>
                        </div>
                    </div>
                </div>
                <div class="rightPart">
                    <div v-for="(ele, ind) in unpassReason[currentClass]" :key="ind">
                        <div class="reasonItems" @click.prevent="chooseReason(ele)">
                            <img src="@/assets/img/form_checkboxes_checked.png" v-if="choosedBadReason[ele.reason]">
                            <img src="@/assets/img/form_checkboxes_unchecked.png" v-else>
                            <P style="margin-left: 10px;color: #222222">{{ele.reason}}</P>
                        </div>
                    </div>
                </div> -->
                <ul class="unpassReasonLine">
                    <li class="title">
                        <div class="leftBox">不良原因类型</div>
                        <div class="rightBox">不良原因明细</div>
                    </li>
                    <li v-for="(item,idx) in unpassReason" :key="idx">
                        <div class="leftBox">{{item.value}}</div>
                        <div class="rightBox">
                            <el-checkbox 
                                v-for="(unpassItem,childIdx) in (item.childList||[])"
                                :label="unpassItem.key"
                                v-model="choosedBadReason"
                                :key="childIdx">
                                {{unpassItem.value}}
                            </el-checkbox>
                        </div>
                    </li>
                    <li class="title">
                        <div class="leftBox">备注</div>
                        <div class="rightBox">
                                <el-input
                                    type="textarea"
                                    :rows="2"
                                    placeholder="请输入内容"
                                    v-model="unpassMark">
                                </el-input>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="dutySelection">
                <label style="margin-right: 1rem;">*责任归属</label>
                <el-select class="fontItemSize" size="small" v-model='dutyListRes'>
                    <el-option :label="item.label" :value="item.value" v-for="(item, index) in dutyListItem" :key="index"></el-option>
                </el-select>
            </div>
            <div class="submitBtn" @click="submit">提交</div>
        </div>
    </el-dialog>
</template>
<script>
import { setPass, getBadReason } from '../axios'
import pagedata from '../datas.js'
export default {
    name: 'badReason',
    data() {
        return {
            // 弹出窗显示控制
            dialogVisible: false,
            // 弹出框不良原因
            unpassReason: [],
            // 选择的不良原因
            choosedBadReason: [],
            // 当前选择的不良原因大类
            currentClass: '',
            choosedClassObj: {},
            // 合格、不合格、降级入库
            clickedBtn: '',
            // 责任归属
            dutyListItem: [],
            dutyListRes: '',
            //不良原因备注
            unpassMark:'',
            barcode:''
        }
    },
    props: [
        'responseInfo'
    ],
    mounted() {
        this.requireBadReason();
        this.getQualityBox()
    },
    methods: {
        //获取下拉框数据
		getQualityBox(){
			this.$ajax({
				method: 'get',
				url:this.apiTest+'/supplier/supplierQualityRecord/getQualityBox',
				data:{}
			}).then(res=>{
				let data=res.data
				if(data.status == 200){
					let result = data.result
                    Object.keys(result.dutys).forEach(item=>{
                        this.dutyListItem.push({
                            label:item,
                            value:result.dutys[item]
                        })
                    })
				}
			})
		},
        // 打开弹出框 
        openDialog(item,barcode) {
            this.clickedBtn = item.value;
            this.barcode = barcode
            item.value === 1 
            ? 
            this.$confirm('确认标记合格么？').then(() => {
                this.setStatus(item.value)
            }).catch(err => {
                console.log("err: ", err)
            })
            : 
            this.dialogVisible = true;
        },
        // 设置状态请求
        setStatus(status) {
            status = status || this.clickedBtn
            this.$ajax({
                method: 'post',
                url:`${this.apiTest}/supplier/supplierQualityRecord/tagOperation`,
                data:{
                    status:parseInt(status),
                    duty:this.dutyListRes,
                    reason:this.choosedBadReason.join(','),
                    mark:this.unpassMark,
                    barcode:this.barcode
                }
            }).then(res=>{
                let data = res.data
                if(data.status == 200){
                    this.$message.success('设置成功')
                }else{
                    this.$message.error(data.msg)
                }
                this.dialogVisible = false
            })
        },
        // 获取不良原因
        requireBadReason() {
            // getBadReason().then(res => {
            //     if(res.data.status === 200) {
            //         this.packBadReason(res.data.result)
            //     }
            // }).catch(err => {
            //     console.log('err: ', err)
            // });
            this.$ajax({
                method: 'get',
                url:`${this.apiTest}/base/systemDictionary/getBadReasons` 
            }).then(res=>{
                let data = res.data;
                if(data.status==200&&data.result){
                    let result = data.result
                    this.unpassReason = result
                }
            })
        },
        // 选择原因
        chooseReason(ele) {
            let obj = Object.assign({}, this.choosedBadReason)
            obj[ele.reason]
            ?
            obj[ele.reason] = false
            :
            obj[ele.reason] = true
            this.choosedBadReason = obj;
        },
        // 处理返回的不良原因
        packBadReason(Arr) {
            let obj = {}
            Arr.map(ele => {
                obj[ele.systemDictionary.value]
                ?
                obj[ele.systemDictionary.value].push(ele)
                :
                obj[ele.systemDictionary.value] = [ele]
            })
            this.currentClass = Object.keys(obj)[0]
            this.unpassReason = obj
        },
        // 选择不良原因类别
        changeCurrentClass(key) {
            this.currentClass = key;
            let obj = Object.assign({}, this.choosedClassObj)
            obj[key]
            ?
            obj[key] = false
            :
            obj[key] = true
            this.choosedClassObj = obj;
        },
        // 提交不良原因
        submit() {
            this.$confirm('确认提交？')
            .then(_ => {
                this.setStatus()
            })
            .catch(_ => {});
        },
        // 关闭弹出框
        handleClose(done) {
            done()
        }
    },
}
</script>
<style scoped>
    .layoutBox{
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between; 
    }
    .dialogHeader{
        width: 100%;
        height: 5rem;
        background: #f3f3f3;
        border-radius: 10px 10px 0 0;
    }
    .titleCan{
        width: 8rem;
        height: 5.6rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-left: 1.4rem;
    }
    .dialogTitle{
        color: #222222;
        font-size: 1.6rem;
    }
    .submitBtn{
        width: 12rem;
        height: 4rem;
        background: #7e6b5a;
        color: #FFF;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 2rem;
        margin-bottom: 2rem;
        cursor: pointer;
        margin-top: 1rem;
    }
    .leftPart{
        width: 40%;
        height: 100%;
        overflow-y: scroll;
    }
    .rightPart{
        width: 56%;
        height: 100%;
        overflow-y: scroll;
    }
    .unpassReason{
        width: 100%;
    }
    .dialogBody{
        width: 90%;
        display: flex;
        justify-content: space-between;
    }
    .columnBar{
        width: .6rem;
        height: 1.8rem;
        background: #7e6b5a;
    }
    .reasonItems{
        display: flex;
        align-items: center;
        justify-content: flex-start;
        height: 2rem;
        width: 100%;
        cursor: pointer;
    }
    .dutySelection{
        width: 90%;
        height: 3rem;
        margin-top: 1rem;
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }
    .unpassReasonLine{
        width:100%;
        padding:10px 0;
    }
    .unpassReasonLine>li{
        border:solid 1px;
        width:100%;
        box-sizing: border-box;
        display: flex;
    }
    .leftBox,.rightBox{
        display: inline-block;
        padding:20px;
    }
    .leftBox{
        border-right:solid 1px;
        width:130px;
        box-sizing: border-box;
        text-align: center;
    }
    .rightBox{
        flex:1;
    }
    .unpassItem-pop >>> .el-dialog{
        height: auto!important;
        min-height:500px;
    }
    .unpassItem-pop >>> .el-dialog__body{
        position:static;
    }
    .title>div{
        text-align: center;
    }
</style>
